<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb" style=" overflow: hidden;">
                <el-breadcrumb separator="/" style=" float: left;  ">
                    <el-breadcrumb-item><a href="{:url('admin/store/index')}">门店列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item>{$title}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style=" float: right;  ">
                    <el-button type="primary" @click="refresh()">刷新</el-button>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form label-width="100px">
                <el-form-item label="门店名称">
                    <el-input v-model="form.store_name"></el-input>
                </el-form-item>

                <el-form-item label="列表logo">
                    <div v-if="form.logo" @click="show_select_logo=true">
                        <el-image class="form-upload_image" :src="form.logo"
                                  style="width:200px; height: 200px;"></el-image>
                        <div class="form-small">
                            <small>图片大小200*200</small>
                        </div>
                    </div>
                    <div v-else>
                        <el-button @click="show_select_logo=true" type="primary">选择图片</el-button>
                        <div class="form-small">
                            <small>图片大小200*200</small>
                        </div>
                    </div>


                </el-form-item>
                <el-form-item label="门面图片">
                    <div v-if="form.head_url" v-for="(imgUrl, index) in form.head_url" :key="index"
                         @click="show_select_image=true">
                        <el-image class="form-upload__image" :src="imgUrl"
                                  style="width:360px; height: 130px;"></el-image>
                        <div class="form-small">
                            <small>图片大小360*130</small>
                        </div>
                    </div>
                    <div v-else>
                        <el-button @click="show_select_image=true" type="primary">选择图片</el-button>
                        <div class="form-small">
                            <small>图片大小360*130</small>
                        </div>
                    </div>

                </el-form-item>
                <el-form-item label="站点公告">
                    <div>
                        <ueditor placeholder="请输入站点公告" @update="richUpdateEvent"></ueditor>
                    </div>
                </el-form-item>
                <el-form-item label="联系人">
                    <div>
                        <el-input v-model="form.name"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="联系电话">
                    <div>
                        <el-input v-model="form.mobile"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="地址">
                    <div>
                        <el-cascader
                                v-model="cascader_value"
                                filterable
                                :options="city_list"
                                :props="{ value:'city_id',label:'label',expandTrigger: 'hover' }"
                                clearable></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item label="街道地址">
                    <div>
                        <el-input type="textarea" v-model="form.address" style="width: 500px;"></el-input>
                    </div>
                </el-form-item>


                <el-form-item>
                    <div class="form-small">
                        <small><a href=" https://lbs.qq.com/getPoint/" target="_blank">获取经纬度</a></small>
                    </div>
                </el-form-item>
                <el-form-item label="坐标经度">
                    <div>
                        <el-input v-model="form.latitude"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="坐标维度">
                    <div>
                        <el-input v-model="form.longitude"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="是否展示">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="2">装修中</el-radio>
                        <el-radio :label="1">营业中</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="门店类型">
                    <el-radio-group v-model="form.store_type">
                        <el-radio :label="1">棋牌</el-radio>
                        <el-radio :label="2">KTV</el-radio>
                        <el-radio :label="3">台球</el-radio>
                        <el-radio :label="4">影吧</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商户名">
                    <div>
                        <el-input v-model="form.sub_mch_id"></el-input>
                        <div class="form-small">
                            <small>商户号用于收款谨慎修改</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="通电时长">
                    <div>
                        <el-input v-model="form.time"></el-input>
                        <div class="form-small">
                            <small>用于后台通电时长控制，单位分钟</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="绑定用户ID">
                    <div>
                        <el-input v-model="form.member_id"></el-input>
                        <div class="form-small">
                            <small>用于小程序上管理店铺</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitEvent" type="primary">
                        提交
                    </el-button>
                    <el-button @click="goBack" type="warning">
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <select-image v-model:show="show_select_image" @confirm="selectImageConfirm"
                  @close="show_select_image=false"></select-image>
    <select-image v-model:show="show_select_logo" @confirm="selectImageConfirmlogo"
                  @close="show_select_logo=false"></select-image>
</div>
{hcmstag:include file="admin@/components/upload/select-image"}
{hcmstag:include file="admin@/components/ueditor"}
<script>
    const App = {
        data() {
            return {
                show_select_image: false,
                show_select_logo: false,
                city_list: [],

                value: [],
                cascader_value: '',
                head_url: [],
                logo: '',
                form: {
                    head_url: [],
                },

            }
        },
        mounted() {
            this.getInfo()
        },
        computed: {
            city_id() {
                if (this.cascader_value.length > 0) {
                    return this.cascader_value[this.cascader_value.length - 1]
                } else {
                    return 0
                }
            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            selectImageConfirm(e) {

                this.form.head_url = []; // 初始化数组，如果它还没有被初始化

                e.forEach(item => {
                    this.form.head_url.push(item.file_url);
                });
            },
            selectImageConfirmlogo(e) {
                console.log('selectImageConfirmlogo', e)
                this.form.logo = e[0].file_url

                console.log(this.form.logo)
            },

            richUpdateEvent(e) {
                console.log('richUpdateEvent', e)
                this.form.notice = e;
            },
            /**
             * 获取联动组件的渲染值
             * @param city_id
             */
            getCascaderValue(city_id) {
                this.city_list.forEach(item => {

                    if (item.children) {
                        item.children.forEach(it => {
                            it.children.forEach(i => {

                                if (parseInt(i.city_id) === parseInt(city_id)) {

                                    this.cascader_value = [item.city_id, it.city_id, i.city_id]
                                    return
                                }
                            })

                            if (parseInt(it.city_id) === parseInt(city_id)) {
                                this.cascader_value = [item.city_id, it.city_id]
                                return
                            }
                        })

                        if (parseInt(item.city_id) === parseInt(city_id)) {
                            this.cascader_value = [item.city_id]
                            return
                        }
                    }
                })
            },
            /**
             * 获取编辑所需信息
             */
            getInfo() {
                let store_id = this.getUrlQuery('store_id', 0)
                console.log(store_id)
                this.httpGet("{:url('admin/store/edit')}/" + store_id, {}).then(res => {
                    if (res.status) {

                        let {city_list = {}, store = {}} = res.data
                        this.city_list = city_list
                        console.log(store)
                        if (store.head_url) {
                            store.head_url = JSON.parse(store.head_url)
                        } else {
                            this.form.head_url = 0;
                        }
                        var ue = UE.getEditor('editor_content');
                        ue.ready(function () {
                            //设置编辑器的内容
                            ue.setContent(store.notice);

                        });
                        if (store.store_id) {
                            this.getCascaderValue(store.city_id)
                            this.form = {
                                ...store,
                            }
                        }

                    }
                })
            },
            /**
             * 提交信息
             */
            submitEvent() {
                this.httpPost("{:url('admin/store/edit')}", {
                    ...this.form,
                    city_id: this.city_id
                }, true).then(res => {
                    if (res.status) {
                        if (res.data.res.role_id == 0) {
                            location.href = "{:url('admin/store/index')}"
                        }
                        this.$message.success(res.msg)

                    }
                })
            },
            refresh() {
                location.replace(location.href);
            },
            goBack() {
                window.history.back();
            }
        }
    }
</script>

<style>
    /*默认输入框宽度*/
    .el-form-item .el-input {
        width: 500px;
    }

</style>
